<template>
  <div class="agent">
    <pending-adopt></pending-adopt>
    <div class="statistical">

      <div class="could-withdraw">
        <div class="avatar">
          <img :src="picUrl" alt="">
        </div>
        <div class="canDraw">
          <!-- <div class="no-grade">
            <div class="title">可提现收益</div>
            <div class="price">￥<em>{{agent.canWithDraw}}</em></div>
          </div> -->
          <div class="have-grade">
            <div class="gradeBox">
              等级：<span>黄金</span>&nbsp;>
            </div>
            <span class="title">可提现收益</span>
            <span class="price">￥<em>{{agent.canWithDraw}}</em></span>
          </div>
        </div>
        <div class="draw">
          <span class="draw-btn" @click="withDraw">提现</span>
        </div>
      </div>

      <div class="no-withdraw">
        <div class="forecast-withdraw">
          <div class="title">预估收益<span class="partner-earn">（合伙人:￥<em>{{agent.agentEstimate}}</em>）</span></div>
          <div class="price">￥<em>{{agent.estimate}}</em></div>
        </div>
        <div class="already-withdraw">
          <div class="title">已提现收益</div>
          <div class="price">￥<em>{{agent.withDrawed}}</em></div>
        </div>
      </div>

      <Banner :banners="banners" v-show="banners.length" />

      <div class="tab-panel">
        <ul class="list">
          <li class="tab-alipay" @click="bind">
            <span></span>
            <p>绑定支付宝</p>
          </li>
          <li class="tab-record" @click="skip('record')">
            <span></span>
            <p>提现记录</p>
          </li>
          <li class="tab-detail" @click="skip('detail')">
            <span></span>
            <p>订单明细</p>
          </li>
        </ul>
        <ul class="list">
          <li class="tab-fans" @click="skip('fans')">
            <span></span>
            <p>我的粉丝</p>
          </li>
          <li class="tab-partner" @click="skip('partner')">
            <span></span>
            <p>我的合伙人</p>
          </li>
          <li class="tab-invite" @click="skip('invite')">
            <span></span>
            <p>招募合伙人</p>
          </li>
        </ul>
      </div>

      <div class="today day">
        <div class="day-title">
          <div class="day-note">今日</div>
        </div>
        <div class="data">
          <div class="withdraw" @click="prediction('today')">
            <div class="price">{{agent.estimateToday}}</div>
            <div class="title">预估收益<div :class="[todayEarnFlag ? 'down':'up']"></div></div>
          </div>
          <div class="order-amount">
            <div class="price">{{agent.orderNumToday}}</div>
            <div class="title">成交笔数</div>
          </div>
        </div>
      </div>
      <div class="part-today" v-show="todayEarnFlag">
        <div class="arrow"></div>
        <div class="price">
          粉丝预估收益：<span>{{agent.fansEstimateToday}}</span>
        </div>
        <div class="price">
          合伙人预估收益：<span>{{agent.agentEstimateToday}}</span>
        </div>
      </div>

      <div class="yesterday day">
        <div class="day-title">
          <div class="day-note">昨日</div>
        </div>
        <div class="data">
          <div class="withdraw" @click="prediction('yesterday')">
            <div class="price">{{agent.estimateYesterday}}</div>
            <div class="title">预估收益<div :class="[yesterdayEarnFlag ? 'down':'up']"></div></div>
          </div>
          <div class="order-amount">
            <div class="price">{{agent.orderNumYesterday}}</div>
            <div class="title">成交笔数</div>
          </div>
        </div>
      </div>
      <div class="part-yesterday" v-show="yesterdayEarnFlag">
        <div class="arrow"></div>
        <div class="price">
          粉丝预估收益：<span>{{agent.fansEstimateYesterday}}</span>
        </div>
        <div class="price">
          合伙人预估收益：<span>{{agent.agentEstimateYesterday}}</span>
        </div>
      </div>


    </div>

    <div class="mask" v-show="isShow">
      <div class="formBox">
        <div class="title">
          <span>绑定支付宝</span>
          <img src="../../assets/images/close-btn.png" @click="close()" class="image" />
        </div>
        <input class="input" v-model="alipay.name" placeholder="请输入您的真实姓名" />
        <input class="input" v-model="alipay.account" placeholder="请输入您的支付宝账号" />
        <mt-button type="danger" class="submit-btn" size="large" @click="bindConfirm()">确定绑定</mt-button>
        <div class="msg">
          <img src="../../assets/images/tip-msg.png" class="image" />
          <span class="msg-title">请仔细填写支付宝账号信息，方便提现金额。如有错误自行承担资金损失风险。</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { axiosGet, axiosPost } from '../../assets/js/api'
  import { MessageBox, Toast, Indicator } from 'mint-ui';
  import Utils from '@/assets/js/utils'
  import Banner from '../../components/Banner'
  import { mapGetters } from 'vuex'
  import PendingAdopt from '../../components/PendingAdopt'

  export default {
    components: {
      Banner,
      PendingAdopt
    },
    computed: {
      ...mapGetters(['mpOpenId', 'picUrl'])
    },
    data () {
      return {
        isShow: false,
        agent: {},
        alipay: {},
        todayEarnFlag: false,
        yesterdayEarnFlag: false,
        banners: []
      }
    },
    mounted () {
      this.fetchWithdraw()
    },
    watch : {
      'mpOpenId': function () {
        this.fetchWithdraw()
      },
      'yesterdayEarnFlag': function () {
        if (this.yesterdayEarnFlag) {
          setTimeout(function () {
            document.body.scrollTop = document.body.scrollHeight
          }, 10)
        }
      }
    },
    methods: {
      skip (type) {
        this.$router.push({
          name: type
        })
      },

      // 预估收益构成
      prediction (type) {

        if (type === 'today') {
          this.todayEarnFlag = this.todayEarnFlag ? false : true
        }

        if (type === 'yesterday') {
          this.yesterdayEarnFlag = this.yesterdayEarnFlag ? false : true
        }
      },

      // 触发提现动作
      withDraw () {
        const self = this;
        if (!this.alipay.isBind) {
          this.isShow = true
          return
        }
        if (this.agent.canWithDraw === '0') {
          Toast({
            message: '金额不足，快去努力赚钱吧~',
            duration: 3000
          })
          return
        }
        MessageBox({
          title: '',
          message: '是否立即发起提现申请',
          showCancelButton: true
        }).then((action) => {
          if (action === 'confirm') {
            self.sendWithDrawRequet()
          }
        })
      },

      // 提现请求
      sendWithDrawRequet () {
        const self = this
        const data = JSON.stringify({
          "mpOpenId": this.mpOpenId
        })
        Indicator.open('加载中...')
        axiosGet('/api/public/1.0/h5/weixin/withdraw?data=' + encodeURI(data))
          .then((response) => {
            if (response.success) {
              Toast({
                message: '提现申请成功',
                duration: 1000
              })
              self.fetchWithdraw()
              self.skip('record')
              return
            }
            Indicator.close()
            self.errorTip(response)
          }, (error) => {
            Indicator.close()
            self.errorTip(error)
          })
      },

      // 获取收益数据
      fetchWithdraw () {
        if (!this.mpOpenId) return;
        const self = this
        const data = JSON.stringify({
          "mpOpenId": this.mpOpenId
        })
        Indicator.open('加载中...')
        axiosGet('/api/public/1.0/h5/weixin/earnStatistics?data=' + encodeURI(data))
          .then((response) => {
            Indicator.close()
            if (response.success) {
              self.agent = response.data;
              self.alipay = response.data.alipay;
              self.banners = response.data.ad.banners;
              return
            }
            self.errorTip(response)
          }, (error) => {
            Indicator.close()
            self.errorTip(error)
          })
      },

      // 绑定支付宝
      bind () {
        this.isShow = true;
      },

      // 确认绑定
      bindConfirm () {
        const self = this
        if (!this.alipay.name || !this.alipay.account) {
          Toast({
            message: '姓名或者账号不允许为空',
            duration: 3000
          })
          return
        }
        const data = JSON.stringify({
          "mpOpenId": this.mpOpenId,
          "account": this.alipay.account,
          "name": this.alipay.name
        })

        axiosGet('/api/public/1.0/h5/weixin/bind/alipay?data=' + encodeURI(data))
          .then((response) => {
            if (response.success) {
              self.isShow = false
              self.fetchWithdraw()
              Toast({
                message: '绑定成功！',
                duration: 3000
              })
            } else {
              self.errorTip(response)
            }
          }, (error) => {
            self.isShow = false
            self.errorTip(error)
          })
      },

      // 统一错误提示
      errorTip (error) {
        Toast({
          message: error.msg || '系统错误，请重试',
          duration: 3000
        })
      },

      // 关闭弹窗
      close () {
        this.isShow = false;
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .agent {
    background-color: #f5f5f5;
    height: 100%;

    .arrow {
      position: absolute;
      left: 1.8rem;
      width: 0;
      height: 0;
      top: -0.16rem;
      border-left: 0.15rem solid transparent;
      border-right: 0.15rem solid transparent;
      border-bottom: 0.2rem solid #FFF;
    }
    .up {
      width: 0;
      height: 0;
      display: inline-block;
      top: -0.04rem;
      left: 0.08rem;
      position: relative;
      border-left: 0.12rem solid transparent;
      border-right: 0.12rem solid transparent;
      border-bottom: 0.12rem solid #C9C9C9;
    }
    .down {
      width: 0;
      height: 0;
      display: inline-block;
      position: relative;
      top: -0.04rem;
      left: 0.08rem;
      border-left: 0.12rem solid transparent;
      border-right: 0.12rem solid transparent;
      border-top: 0.12rem solid #C9C9C9;
    }

    .title {
      margin: 0.2rem 0 0.1rem 0;
      font-size: 0.28rem;
      color: #888;
    }

    .mask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .formBox {
      background-color: #FFF;
      position: absolute;
      top: 28%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 0.3rem 0.3rem;
      border-radius: 0.15rem;
      .title {
        text-align: center;
        color: #333;
        font-size: 0.32rem;
        position: relative;
        .image {
          width: 0.3rem;
          height: 0.3rem;
          float: right;
        }
      }
      input {
        width: 5.6rem;
        height: 0.78rem;
        padding-left: 0.23rem;
        margin-top: 0.15rem;
        border: 0.5px solid #C9C9C9;
        border-radius: 0.15rem;
        font-size: 0.28rem;
        outline: none;
      }
      .submit-btn {
        display: block;
        height: 0.8rem;
        font-size: 0.32rem;
        margin-top: 0.35rem;
      }
      .msg {
        font-size: 0.26rem;
        color: #666;
        padding-top: 0.3rem;
        line-height: 1.4;
        padding-left: 0.1rem;
        .image {
          height: 0.26rem;
          width: 0.26rem;
          position: relative;
          top: 0.04rem;
        }
        .msg-title {
          padding-left: 0.1rem;
        }
      }
    }

    .statistical {
      background-color: #F5F5F5;
      padding-bottom: 0.2rem;
      .price {
        em {
          font-style: normal;
          position: relative;
          left: -0.1rem;
        }
        font-size: 0.32rem;
      }

      .part-today, .part-yesterday {
        position: relative;
        margin-top: 0.2rem;
        background-color: #FFF;
        padding: 0.38rem 0.3rem;
        display: flex;
        .price {
          flex: 1;
          color: #888;
          font-size: 0.26rem;
        }
      }
      .part-today {
        span {
          color: #f96547;
        }
      }
      .part-yesterday {
        span {
          color: #000;
        }
      }

      .tab-panel {
        .list {
          display: flex;
          padding: 0.35rem 0 0.25rem 0;
          background: #FFF;

          &:first-child {
            border-bottom: 0.5px solid #e8e8e8;
          }
          li {
            flex: 1;
            text-align: center;
            color: #444;
            font-size: 0.26rem;
            span {
              display: inline-block;
              width: 0.6rem;
              height: 0.6rem;
            }
            p {
              padding-top: 0.2rem;
            }
          }
          .tab-alipay {
            span {
              background: url('../../assets/images/alipay.png') left bottom no-repeat;
              background-size: 100%;
            }
          }
          .tab-record {
            span {
              background: url('../../assets/images/record.png') left bottom no-repeat;
              background-size: 100%;
            }
          }
          .tab-detail {
            span {
              background: url('../../assets/images/detail.png') left bottom no-repeat;
              background-size: 100%;
            }
          }
          .tab-fans {
            span {
              background: url('../../assets/images/fans.png') left bottom no-repeat;
              background-size: 100%;
            }
          }
          .tab-partner {
            span {
              background: url('../../assets/images/partner.png') left bottom no-repeat;
              background-size: cover;
            }
          }
          .tab-invite {
            span {
              background: url('../../assets/images/invite.png') left bottom no-repeat;
              background-size: 100%;
            }
          }
        }
      }

      .could-withdraw {
        display: flex;
        padding: 0.45rem 0.3rem 0.45rem;
        background-color: #f83654;
        background-image: url('//cowcdn.oss-cn-hangzhou.aliyuncs.com/wxapp/agent-head.jpg');
        background-size: cover;
        .avatar {
          width: 1.2rem;
          height: 1.2rem;
          border: 3px solid #f68294;
          position: relative;
          top: 0.06rem;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .canDraw {
          flex: 3;
          margin-left: 0.3rem;
          .gradeBox {
            color: #fff;
            font-size: 0.26rem;
            span {
              width: 0.95rem;
              height: 0.4rem;
              display: inline-block;
              line-height: 0.4rem;
              text-align: center;
              border-radius: 10px;
              color: #fff;
              background-color: #fa8464;
            }
          }
          .title {
            color: #fff;
          }
          .price {
            font-size: 0.6rem;
            color: #fff;
          }
        }
        .draw {
          flex: 2;
          text-align: center;
          padding-top: 0.3rem;
          .draw-btn {
            color: #FFF;
            font-size: 0.28rem;
            padding: 0.2rem 0.7rem;
            border: 0.5px solid #FFF;
            border-radius: 0.4rem;
            display: inline-block;
          }
        }
      }

      .no-withdraw {
        display: flex;
        background-color: #fff;
        margin-bottom: 0.2rem;
        .price {
          color: #000;
          font-size: 0.44rem;
        }
        .title {
          color: #bbb;
        }
        .forecast-withdraw {
          flex: 2;
          padding: 0.1rem 0.5rem 0.3rem;
          border-right: 0.5px solid #e8e8e8;
          text-align: center;
          .partner-earn {
            color: #97a6d9;
            font-size: 0.24rem;
            em {
              font-style: normal;
              position: relative;
              left: -0.05rem;
            }
          }
        }
        .already-withdraw {
          flex: 1;
          padding: 0.1rem 0.5rem 0.3rem;
          text-align: center;
        }
      }

      .day {
        margin-top: 0.2rem;
        background-color: #fff;
        padding: 0 0.3rem;
        .day-title {
          padding: 0.2rem 0;
          border-bottom: 0.5px solid #e8e8e8;
          font-size: 0.32rem;
          .day-note {
            padding-left: 0.2rem;
          }
        }
        .data {
          display: flex;
          padding: 0.3rem 0 0.2rem;
          .withdraw, .order-amount {
            flex: 1;
            text-align: center;
            padding-top: 0.1rem;
          }
          .withdraw {
            border-right: 0.5px solid #e8e8e8;
            .title {
              position: relative;
            }
          }
        }
      }

      .today {
        .day-note {
          border-left: 0.06rem solid #f83654;
        }
        .withdraw {
          .price {
            color: #f96547;
          }
        }
        .order-amount {
          .price {
            color: #f96547;
          }
        }
      }

      .yesterday {
        .day-note {
          border-left: 0.06rem solid #f89342;
        }
      }
    }
  }
</style>
